<template>
  <view class="yuongjin">

    <u-tabs bg-color="#f8f8f8" :active-color="themeColor1" name="cate_name" count="cate_count" :list="list2"
      :is-scroll="false" :current="current" @change="change"></u-tabs>

    <u-collapse v-if="list.length > 0" :accordion="false" @change="collapseChange" ref="collapse" :item-style="itemStyle">
      <u-collapse-item :head-style="{ padding: ' 0 15px', backgroundColor: themeColor1, color: btn_text_color }"
        :item-style="{ padding: 0, }" ref="collapseItem" :index="item.id" v-for="(item, index) in list" :key="item.id">
        <view slot="title-all" class="boxTop">
          <view class="index">{{ item.create_time }}</view>
          <view class="number">{{ item.state_title }}</view>
        </view>
        <view class="module">
          <view class="item" v-for="(item_, index_) in 13" :key="item + 'item'">
            <view class="userInfo1" @click="slotData(index, index_ + 1)">
              <!-- <view class="index">{{ index_ + 1 >= 10 ? '' : '0' }}{{ index_ + 1 }}</view> -->

              <view class="info">
                <!-- <u-avatar style="" :src="$util.img(item[`o${item_ + 1}_headimg`])" size="80"></u-avatar> -->

                <view class="avatarBox">
                  <view class="index">{{ index_ + 1 >= 10 ? '' : '0' }}{{ index_ + 1 }}</view>
                  <u-avatar style="" :src="$util.img(item[`o${item_ + 1}_headimg`])" size="80"></u-avatar>
                </view> 
                <view class="userInfo" v-if="item[`o${item_ + 1}_nickname`] || item[`o${item_ + 1}_mobile`]">
                  <view class="name">
                    {{ item[`o${item_ + 1}_nickname`] }}
                  </view>
                  <view class="time">
                    {{ item[`o${item_ + 1}_time`] | formatDate }}
                  </view>
                </view>
                <view v-else class="userInfo">
                  <view class="name">
                    待邀请
                  </view>
                </view>
              </view>
            </view>

            <view class="imgBox" @click="storyData(index, index_ + 1)">
              <view class="img">
                <image :src="$util.img(item[`o${item_ + 1}_img`])" mode="aspectFill"></image>
              </view>
            </view>
          </view>
        </view>
      </u-collapse-item>
    </u-collapse>
    <ns-empty v-else :isIndex="false" text="暂无数据"></ns-empty>


    <u-modal v-model="show" title="用户信息">
      <view class="slot-content">
        <view class="item" @click="call(slot.mobile)">
          <view class="info">
            <u-avatar style="" :src="$util.img(slot.headimg)" size="80"></u-avatar>
            <view class="userInfo">
              <view class="name">
                {{ slot.nickname }}
              </view>
              <view class="mobile" v-if="slot.mobile">
                {{ slot.mobile }}
              </view>
            </view>
          </view>
          <u-icon name="phone-fill" color="#93753a" size="56"></u-icon>
        </view>
      </view>
    </u-modal>

    <u-modal :title-style="{ fontWeight: 'bold', fontSize: '18px', }" v-model="show2" :title="story.title"
      :show-confirm-button="false" show-cancel-button cancel-text="关闭">
      <view class="slot-story">
        <view>
          <image :src="$util.img(this.story.img)" mode="widthFix"></image>

          <view class="content">
            {{ story.content }}
          </view>
        </view>
      </view>
    </u-modal>
  </view>
</template>

<script>
export default {
  components: {
  },
  mixins: [],
  //计算属性
  computed: {

  },
  // 过滤器
  filters: {
    //把 字符串 2025.04.29 14:39:03 变成 04-29 14:39
    formatDate(date) {
      let date1 = date.split(' ')[0].split('.').slice(1).join('-') + ' ' + date.split(' ')[1]
      // date1去掉后面三位
      date1 = date1.substring(0, date1.length - 3)
      return date1
    }
  },
  data() {
    return {
      story: {
        img: '',
        title: '',
        content: '',
      },
      slot: {
        nickname: '',
        mobile: '',
        headimg: '',
        time: '',
      },
      show2: false,
      show: false,
      themeColor1: '',
      btn_text_color: '',
      list2: [{
        name: '待成团',
        id: 1,
        count: 0
      }, {
        name: '已成团',
        id: 2,
        count: 0
      }],
      current: 0,
      data: [],
      status: 'loadmore',
      page: 1,
      pageSize: 10,
      count0: 0,
      count1: 0,
      options: {},
      list: [],
      itemStyle: {
        padding: '0 30rpx',
        marginTop: '10px',
        marginBottom: '10px',
        backgroundColor: '#fff',
        // border: '1px solid #f5bd00',
        borderRadius: '10px',
      },
      open: [0],
    }
  },
  onReachBottom() {
    if (this.status == 'nomore') {
      return;
    }
    this.page = ++this.page;
    // this.dataList(this.options.type)
    this.myTeamList()
  },
  onShow() {
    this.$api.sendRequest({
      url: "/api/member/judgeBuy",
      success: res => {
        console.log(res, '/api/member/judgeBuy');
        if (!res.data) {
          uni.hideShareMenu()
        }
      }
    });
  },
  onLoad(options) {
    let theme = uni.getStorageSync('theme_style');
    this.themeColor1 = `${theme.main_color}`;
    this.btn_text_color = `${theme.btn_text_color}`;

    
    this.options = options
    // this.dataList(this.options.type)
    this.myTeamList()
  },
  //生命周期渲染完成
  onReady() {
    this.$nextTick(() => {
      this.init()
    });
  },
  methods: {
    call(mobile) {
      if (!mobile) {
        this.$util.showToast({
          title: '该用户未绑定手机号'
        });
        return;
      }

      const res = uni.getSystemInfoSync()
      if (res.platform == 'ios') {
        uni.makePhoneCall({
          phoneNumber: mobile,
          success: () => { },
          fail() { }
        })
      } else {
        uni.showActionSheet({
          itemList: [mobile, '呼叫'],
          success: (res) => {
            if (res.tapIndex == 1) {
              uni.makePhoneCall({
                phoneNumber: mobile
              })
            }
          }
        })
      }
    },
    slotData(index, index_) {
      this.slot = {
        nickname: '',
        mobile: '',
        headimg: '',
        time: '',
      }
      this.slot.nickname = this.list[index]['o' + index_ + '_nickname']
      this.slot.mobile = this.list[index]['o' + index_ + '_mobile']
      this.slot.headimg = this.list[index]['o' + index_ + '_headimg']
      this.slot.time = this.list[index]['o' + index_ + '_time']
      console.log(this.slot, 'this.slot');
      console.log(this.list[index], 'this.list[index]');
      this.show = true

    },
    storyData(index, index_) {
      this.story = {
        img: '',
        title: '',
        content: '',
      }
      this.story.img = this.list[index]['o' + index_ + '_img']
      this.story.title = this.list[index]['o' + index_ + '_title']
      this.story.content = this.list[index]['o' + index_ + '_content']
      console.log(this.story, 'this.story');
      console.log(this.list[index], 'this.list[index]');
      this.show2 = true
    },
    init() {
      //定时器
      setTimeout(() => {
        console.log('重新计算');
        console.log(this.$refs, '重新计算');
        if (this.$refs.collapseItem) {
          this.$refs.collapseItem[0].open = true;

          this.$refs.collapseItem[0].init()
        }
      }, 500)
    },
    collapseChange(activeNames) {
      console.log(activeNames);
      console.log(this.$refs);
      this.$refs.collapseItem[0].queryRect()
      this.$refs.collapse.init()
    },
    change(index) {
      this.current = index;
      this.list = []
      this.status = 'loadmore'
      this.$nextTick(() => {
        this.init()
      });
      this.myTeamList()
    },
    myTeamList() {
      this.$api.sendRequest({
        url: '/api/member/myTeamList',
        data: {
          type: this.list2[this.current].id
        },
        success: res => {
          console.log(res.data, 'res.data');
          this.list.push(...res.data.list)
          this.list2[this.current].count = res.data.count
          this['count' + this.current] = res.data.count
          this.status = this.list.length >= this['count' + this.current] ? 'nomore' : 'loadmore';

        }
      });
    },
    dataList(type) {
      this.status = 'loading';
      if (type == 1) {
        this.$api.sendRequest({
          url: '/api/member/liandongteamzhitui',
          data: {
            page: this.page,
            pageSize: this.pageSize,
            type: this.list2[this.current].id
          },
          success: res => {
            this.data = res.data
            this.count = res.data.count
            this.status = this.data.list.length >= this.count ? 'nomore' : 'loadmore';
            console.log(this.data, 'this.data');
          }
        });
      } else {
        this.$api.sendRequest({
          url: '/api/member/liandongteamlist',
          data: {
            page: this.page,
            pageSize: this.pageSize,
            type: this.list2[this.current].id
          },
          success: res => {
            this.count = res.data.count
            this.data = res.data
            console.log(this.data, 'this.data');
            this.status = this.data.list.length >= this.count ? 'nomore' : 'loadmore';

          }
        });
      }

    }
  },
  onShareTimeline() {
    return {
      title: '鹏城快享',
      query: `source_member=${uni.getStorageSync("user_id")}`,
      imageUrl: ""
    }
  },
  onShareAppMessage() {
    return {
      title: "鹏城快享",
      path: `/pages/index/index?source_member=${uni.getStorageSync("user_id")}`,
      imageUrl: ''
    }
  },
};
</script>

<style lang="scss" scoped>
@import '@/common/css/diy.scss';

::v-deep .u-badge-mini {
  right: 40px !important;
}

::v-deep .u-collapse-item {
  padding: 0 !important;
}

::v-deep .u-collapse-head {
  //渐变色上到下
  background: linear-gradient(to bottom, #c5aa75, #937539) !important;
  color: #fff !important;
  border-radius: 20rpx;
  padding: 18rpx 30rpx !important;
}

.slot-story {
  padding: 10px;

  .title {
    text-align: center;
    font-size: 16px;
    margin: 10px 0;
  }

  .content {
    text-indent: 2em;
    line-height: 24px;
    font-size: 16px;
    margin: 10px;
  }
}

.yuongjin {
  margin: 20rpx 30rpx;
  padding-bottom: 30px;
}

.boxTop {
  flex: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .number {
    background-color: #fdf1db;
    padding: 5px 10px;
    border-radius: 15px;
    // color: #fff;
    font-size: 17px;
    color: #997f48;
    // border: 1px solid #e29756;
  }

  .index {
    color: #fff;
    font-size: 35rpx;
  }
}

.slot-content {
  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    margin-bottom: 10px;
    gap: 10px;
    border-radius: 10px;
    height: 70px;
    padding: 0 15px;

    .index {
      // width: 20px;
      text-align: center;
      font-size: 50rpx;
      font-weight: bold;
      color: #937539;
      margin-left: 10px;
    }



    .time {
      text-align: right;
      font-size: 12px;
      color: #666;
    }

    .info {
      display: flex;
      align-items: center;
      gap: 5px;
      flex: 1;

      .userInfo {
        display: flex;
        flex-direction: column;
        gap: 3px;

        .name {
          // font-weight: bold;
          font-size: 23px;
          color: #937539;
        }

        .mobile {
          // margin-top: 5px;
          font-size: 13px;
          color: #666;
        }

        .time {
          color: #937539;
        }
      }
    }

    .imgBox {
      height: 100%;
      width: 110px;

      .img {
        height: 100%;
        width: 100%;

        image {
          background-color: #666;
        }
      }
    }
  }
}

.module {
  padding: 10px;
  background: #fff;
  border-radius: 10px;
  margin-bottom: 10px;
  // display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  border: 2px solid #d5c099;


  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    margin-bottom: 10px;
    gap: 10px;
    background: #ffeacb;
    border-radius: 10px;
    border: 1px solid #d4be95;
    height: 120px;
    overflow: hidden;

    .userInfo1 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex: 1;
      gap: 10px;
      height: 100%;

      .info {
        .avatarBox {
          position: relative;

          .index {
            position: absolute;
            position: absolute;
            z-index: 2;
            font-size: 12px !important;
            bottom: 0;
            right: -5px;
            background-color: #fff;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            // border: 1px solid #937539;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }

    .index {
      // width: 20px;
      text-align: center;
      font-size: 50rpx;
      font-weight: bold;
      color: #937539;
      margin-left: 10px;
    }



    .time {
      text-align: right;
      font-size: 13px;
      color: #666;
    }

    .info {
      display: flex;
      align-items: center;
      flex-direction: column;
      gap: 5px;
      flex: 1;
      height: 100%;
      justify-content: center;
      padding-left: 5px;

      .userInfo {
        display: flex;
        flex-direction: column;
        gap: 3px;

        .name {
          // font-weight: bold;
          font-size: 16px;
          text-align: center;
          color: #937539;
        }

        .mobile {
          // margin-top: 5px;
          font-size: 13px;
          color: #666;
        }

        .time {
          text-align: center;
          color: #937539;
        }
      }
    }

    .imgBox {
      height: 100%;
      width: 210px;

      .img {
        height: 100%;
        width: 100%;

        image {
          background-color: #666;
        }
      }
    }
  }

  .item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }
}

.active {
  color: #fe7f18;
}</style>
